<template>
  <div class="xin">
    <div class="bd">
      <p>WELCOME</p>
      <el-form :model="user" label-width="100px" :rules="rules" class="from">
        <el-form-item label="用户">
          <el-input v-model="user.name" prop="name" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.pwd" prop="pwd" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fndebounce">提交</el-button>
        </el-form-item>
      </el-form>
      <div class="ct">注册账号 | 忘记密码</div>
    </div>
  </div>
</template>
<script>
import instance from "../api";
import debounce from "../plugin/debounce";
export default {
  name: "Xin",
  data() {
    return {
      user: {
        name: "wang1234",
        pwd: "123456",
      },
      rules: {
        name: [
          {
            required: "true", //必填项
            message: "错误", //错误提示
            tirgger: "blur", //失去焦点时触发
            pattern: /123456/, //这是正则验证
          },
        ],
        pass: [],
      },
    };
  },
  created() {
    this.fnajax = debounce(this.fnsubmit); //业务函数防抖封装
  },
  methods: {
    fndebounce() {
      this.fnajax();
    },
    async fnsubmit() {
      let name = this.user.name;
      let pwd = this.user.pwd;
      console.log(name, pwd);
      let { data } = await instance.get("/user", { params: { name, pwd } });
      let token = data[0].token;
      localStorage.setItem("token", token);
      if (data.length > 0) {
        this.$message({
          showClose: true,
          message: "登录成功",
          type: "success",
          duration: 1000,
          onClose: () => {
            // alert("=====")
            this.$router.push({ name: "home" });
          },
        });
      }
    },
  },
};
</script>
<style scoped>
.xin {
  width: 100vw;
  height: 100vh;
  padding-top: 10%;
  background-image: url(../assets/1.jpg);
  background-size: 100% 100%;
}

.bd{
  margin: 0 auto;
  color: aliceblue;
  border:1px solid;
  text-align: center;
  width: 800px;
  height: 600px;
  position: relative;
}
.bd .from {
  width: 400px;
  margin: 25%;
}
.bd>p{
  position: absolute;
  left: 50%;
  top: 20%;
}
.ct{
  color: aliceblue;
  position: absolute;
  left: 45%;
  bottom: 30%;
}
</style>